<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Challenge 04</title>
    <link rel="stylesheet" href="../../style.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <header class="nav">
        <a href="/">
          <img src=" /logo.svg" alt="logo" />
        </a>
        <a href="https://jsmastery.com/all-courses" target="_blank"
          >GSAP Course</a
        >
      </header>

      <div class="content">
        <div class="arrow">
          <a href="../../index.html">
            <img src=" /arrow.svg" alt="arrow" />
          </a>
        </div>

        <section>
          <h1>Challenge 04</h1>
          <p>
            You’ve explored how <code>gsap.fromTo()</code> lets you control both
            where an animation starts and where it ends. In this challenge,
            you're putting that knowledge to use in a way that feels playful,
            alive, and very familiar.
          </p>
          <p>
            Your task is to recreate a Facebook-style emoji reaction animation.
            When someone clicks on a reaction button, the emoji should float up
            like a bubble, grow a little, spin a bit, and then gently fade away.
          </p>
          <p>
            Read more about
            <a
              href="https://greensock.com/docs/v3/GSAP/gsap.fromTo()"
              target="_blank"
              >gsap.fromTo()</a
            >
            method.
          </p>
        </section>
      </div>

      <div class="demo flex-center">
        <section>
          <div class="reactions">
            <button data-emoji="❤️">❤️</button>
            <button data-emoji="🔥">🔥</button>
            <button data-emoji="😆">😆</button>
            <button data-emoji="😮">😮</button>
          </div>
        </section>
      </div>

      <script type="module" src="script.js"></script>
    </main>
  </body>
</html>
